<!--
 * @Description:: wangeditor 本地上传
 * @Version: 请配置版本号
 * @Author: 小白
 * @Date: 2020-12-02 11:36:57
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-07-16 14:50:52
 * @FilePath: /huizhou_website_admin/src/components/wangeditor/wangeditor_bendi.vue
-->
<template>
  <div
    style="position:relative;">
    <div ref="editorElem"
      style="text-align:left;" />
    <div class="length">
      当前已经输入{{ editorContent.length }}个字符
    </div>
  </div>
</template>
<script>
import { HTTP_URI } from '@/api/baseUrl'
import E from 'wangeditor'
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    clearEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      action: HTTP_URI.UPLOADIMG,
      editorContent: this.content,
      fileList: [],
      imgUrl: '',
      info_: null
    }
  },
  watch: {
    clearEdit(val) {
      this.createEdit(val)
    },
    content: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.content)
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.createEdit(true)
      this.editor.txt.html(this.content)
    }, 200)
  },
  methods: {
    createEdit() {
      this.editorContent = this.content
      this.editor = new E(this.$refs.editorElem)
      // this.editor.config.onchange = (html) => {
      //   this.editorContent = html
      // }
      this.editor.config.menus = [
        // 'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        // "strikeThrough", // 删除线
        'foreColor', // 文字颜色
        // "backColor", // 背景颜色
        'link', // 插入链接
        // 'list', // 列表
        'justify', // 对齐方式
        // "quote", // 引用
        // "emoticon", // 表情
        'image', // 插入图片
        'table', // 表格
        // 'video', // 插入视频
        // "code", // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ]
      this.editor.config.zIndex = 100
      // 过滤掉复制文本中自带的样式,默认开启
      this.editor.config.pasteFilterStyle = false
      // 自定义处理粘贴的文本内容
      this.editor.config.pasteTextHandle = function (content) {
        // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
        // this.editor.txt.html(content)

        if (content === '' && !content) return ''
        let str = content
        // 处理的标签里的多余代码
        str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, '')
        str = str.replace('/(\\n|\\r| class=(")?Mso[a-zA-Z]+(")?)/g', '')
        const reg = new RegExp('<!--(.*?)-->', 'g')
        str = str.replace(reg, '')
        return str
      }
      this.editor.config.linkImgCallback = function (url) {
        console.log(url, '1') // url 即插入图片的地址
      }
      // this.editor.config.linkCheck = function (text, link) {
      //   console.log(text) // 插入的文字
      //   console.log(link) // 插入的链接

      //   return true // 返回 true 表示校验成功
      //   // return '验证失败' // 返回字符串，即校验失败的提示信息
      // }
      // 自定义配置颜色（字体颜色、背景色）
      this.editor.config.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
      ]
      // // 自定义字体
      // this.editor.config.fontNames = [
      //   '宋体',
      //   '微软雅黑',
      //   'Arial',
      //   'Tahoma',
      //   'Verdana'
      // ]
      // 自定义字体
      this.editor.config.fontNames = ['宋体', '黑体', '楷体', '微软雅黑', 'Arial', 'Verdana', 'Georgia']
      this.editor.config.fontSizes = {
        'x-small': {
          name: '14px',
          value: '1'
        },

        small: {
          name: '15px',
          value: '2'
        },

        normal: {
          name: '16px',
          value: '3'
        },

        large: {
          name: '18px',
          value: '4'
        },

        'x-large': {
          name: '24px',
          value: '5'
        },
        'xx-large': {
          name: '32px',
          value: '6'
        }
      }
      // 隐藏“网络图片”tab
      this.editor.config.showLinkImg = false
      // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
      // this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片不建议使用这种，我只是图个方便
      this.editor.config.uploadImgServer = `${HTTP_URI.WANGEDITORIMG}` // 上传图片到服务器
      this.editor.config.uploadFileName = 'multipartFile'
      this.editor.config.uploadImgHooks = {
        success: function (xhr) {
          console.log('success', xhr, '0')
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
          console.log('fail', resData, '1')
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          console.log('error', xhr, resData, '2')
        },
        customInsert: function (insertImgFn, result) {
          // result 即服务端返回的接口
          const imgUrl = `${result.data.data[1]}/${result.data.data[0]}`
          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(imgUrl)
        }
      }
      this.editor.config.onchange = html => {
        this.editorContent = html
        this.info_ = html
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }
      this.editor.create()
      // if (val) this.editor.txt.html(this.content)
      // else this.editor.txt.clear()
    }
  }
}
</script>
<style scoped>
/* table 样式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 样式 */
ul,
ol {
  margin: 10px 0 10px 20px;
}
</style>
<style>
.w-e-text-container {
  border-radius: 0 0 5px 5px;
}
.w-e-toolbar {
  border-radius: 5px 5px 0 0;
}
.w-e-menu .w-e-panel-container .w-e-panel-tab-content input[type='text'] {
  height: 30px !important;
  line-height: 30px;
}
.length {
  position: absolute;
  right: 10px;
  bottom: -32px;
  z-index: 999;
}
/* .w-e-menu:nth-child(10){
    position: relative;
  } */
.w-e-toolbar {
  position: relative;
}
.uploadvideo {
  position: absolute;
  top: 1px;
  left: 370px;
  z-index: 999;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: white;
  text-align: center;
}
.uploadvideo:hover {
  cursor: pointer;
  background: #f5f5f5;
}
.ant-form input[type='file'] {
  display: none !important;
}
.el-upload-list {
  opacity: 0;
}
.video {
  width: 99%;
  margin: 0 auto;
}
font[size='1'] {
  font-size: 14px;
}
font[size='2'] {
  font-size: 15px;
}
font[size='3'] {
  font-size: 16px;
}
font[size='4'] {
  font-size: 18px;
}
font[size='5'] {
  font-size: 24px;
}
font[size='6'] {
  font-size: 32px;
}
</style>
